<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Supabase like header example</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="header">
        <div class="menu__wrapper">
            <div class="menu__bar">
                <a href="#" title="Home" aria-label="home" class="logo">
                    <img src="assets/logo.png" alt="logo">
                </a>
                <nav>
                    <ul class="navigation hide">
                        <li>
                            <button type="button">Product<!-- svg --></button>
                            <div class="dropdown__wrapper">
                                <div class="dropdown">
                                    <ul class="list-items-with-description">
                                        <li>
                                            <div class="icon-wrapper">
                                                <!-- svg icon -->
                                            </div>
                                            <div class="item-title">
                                                <h3>Database</h3>
                                                <p>Fully portable Postgres database</p>
                                            </div>
                                        </li>
                                        <!-- more list items -->
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#devs" title="Developers">Developers</a>
                        </li>
                        <!-- li menu -->
                </nav>
            </div>
            <div class="action-buttons hide">
                <a href="#log-in" title="Log in" class="secondary">Sign in</a>
                <a href="#sign-up" title="Sign up" class="primary">Start your project</a>
            </div>
            <button aria-label="Open menu" class="burger-menu" type="button">
                <!-- menu svg -->
            </button>
        </div>
    </header>
</body>

</html>


